Battery Status API 是個蠻有趣的應用，我們可以透過這個 API 取得使用者裝置的電池資訊，並顯示在網頁上，這些資訊包括電池充電狀態、電量百分比、充電時間以及放電時間。透過這些資料，我們可以針對不同的電池狀況來優化網站或應用程式，例如在電量低的時候，降低可能會消耗資源的功能，提高使用者瀏覽的體驗。

瀏覽器的支援情況

Battery Status API 支援大多數的瀏覽器，包括 Google Chrome、Firefox 及 Opera 等。然而，由於隱私考量，部分瀏覽器 (如 Safari )並不支援該 API。因此，在開發中應該進行相應的檢查，以確保應用程式在不支援該 API 的情況下依然能正常運作。

如何使用 Battery Status API

Battery Status API 本身的功能非常簡單，以下是基本三步驟：

1. 檢查 API 支援情況
2. 存取電池資訊
3. 監聽電池狀態變化

檢查 API 支援情況

首先，我們要檢查瀏覽器是否支援 Battery Status API。判斷 navigator.getBattery 是否存在來做到這功能：

if ('getBattery' in navigator) {
  console.log('Battery Status API is supported');
} else {
  console.log('Battery Status API is not supported');
}

存取電池資訊

如果瀏覽器支援 Battery Status API，我們可以使用 navigator.getBattery 方法來存取電池資訊，包含有關電池狀態的各種屬性和事件。

navigator.getBattery().then(function(battery) {
  console.log(`電池狀態：${battery.charging}`);
  console.log(`當前電量：${battery.level * 100}%`);
  console.log(`充滿電的時間：${battery.chargingTime} 秒`);
  console.log(`還能用的時間：${battery.dischargingTime}秒`);
});

battery.chargingTime 和 battery.dischargingTime 我覺得較不好理解，所以這邊再拉出來介紹一下。

chargingTime

chargingTime 表示裝置從當前電量到充滿電所需的剩餘時間，單位為秒。如果裝置正在充電，會顯示一個正整數，表示預計還需要多少秒才能充滿電。如果設備未在充電，則會顯示 Infinity。

dischargingTime

dischargingTime 表示裝置在當前電量下，預計還能使用多少時間，單位為秒。如果沒有在充電，會顯示一個正整數，表示預計還能使用多少秒鐘。如果設備正在充電，則顯示 Infinity。

應用範例

我們就可以用 battery.charging 取得電池是否在充電，來顯示對應的貼心訊息

navigator.getBattery().then(function(battery) {
  if (battery.charging) {
    console.log('正在充電，預計還需 ' + Math.round(battery.chargingTime / 60) + ' 分鐘充滿電。');
  } else if (!battery.charging) {
    console.log('預計還能使用 ' + Math.round(battery.dischargingTime / 60) + ' 分鐘。');
  }
});

監聽電池狀態變化

除了取得電池資訊外，我們還可以監聽電池狀態的變化。 BatteryManager 物件提供了多個事件，包括 chargingchange、levelchange、chargingtimechange 和 dischargingtimechange，用於監聽電池狀態的變化。

navigator.getBattery().then(function (battery) {
  battery.addEventListener('chargingchange', function () {
    console.log(`電池狀態：${battery.charging}`);
  });
  
  battery.addEventListener('levelchange', function () {
    console.log(`當前電量：${battery.level * 100}%`);
  });
  
  battery.addEventListener('chargingtimechange', function () {
    console.log(`充滿電的時間：${battery.chargingTime} 秒`);
  });
  
  battery.addEventListener('dischargingtimechange', function () {
    console.log(`還能用的時間：${battery.dischargingTime}秒`);
  });
});

當電量發生改變時，就會出現相關事件的訊息

做一個節能模式的網站

如果在瀏覽網站時，發現網站會很貼心的根據你的裝置電源適時調整網站，例如減少動畫效果，以及減少會耗電的功能，這樣的節能模式是不是很貼心呢！我們可以利用 battery.level 取得當前電池的電量，並且持續監聽 levelchange 事件，當電量改變到我們設定的範圍時，可以在 body 加入 Class 去隱藏動畫或元素，顯示簡化版的網站內容。

navigator.getBattery().then(function (battery) {
  function togglePowerSavingMode() {
    console.log('電池電量', battery.level);
    if (battery.level < 0.8) {
      document.body.classList.add('power-saving-mode');
    } else {
      document.body.classList.remove('power-saving-mode');
    }
  }
  togglePowerSavingMode();
  battery.addEventListener('levelchange', togglePowerSavingMode);
});

範例程式碼

線上範例網址：https://mukiwu.github.io/web-api-demo/battery-safe.html

小結

Battery Status API 提供了詳細的電池狀態資訊，我們可以靈活利用這些資訊提升使用者瀏覽網站的體驗。有任何問題歡迎留言討論唷！